<template>
    <div class="person">
      姓：<input type="text" v-model="firstName"> <br>
      名：<input type="text" v-model="lastName"> <br>
      全名：<span>{{fullName}}</span> <br>
      <button @click="changeFullName">全名改为：li-si</button>
    </div>
  </template>
  
  <script setup lang="ts" name="App">
    import {ref,computed} from 'vue'
  
    let firstName = ref('zhang')
    let lastName = ref('san')
  
    // 计算属性——只读取，不修改
    /* let fullName = computed(()=>{
      return firstName.value + '-' + lastName.value
    }) */
  
  
    // 计算属性——既读取又修改
    let fullName = computed({
      // 读取
      get(){
        return firstName.value + '-' + lastName.value
      },
      // 修改
      set(val){
        console.log('有人修改了fullName',val)
        firstName.value = val.split('-')[0]
        lastName.value = val.split('-')[1]
      }
    })
  
    function changeFullName(){
      fullName.value = 'li-si'
    } 
  </script>